<template>
	<view class="page" style="width:750rpx;overflow: hidden;">
		<!-- 搜索 -->
		<view class="search-head">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="search">
				<text class="iconfont icon-fadajing"></text>
				<input type="text" confirm-type="search" @confirm="searchList" v-model="keyword"  placeholder="搜索商品" />
			</view>
			<view class="cut" @click="isList = !isList">
				<text class="iconfont" :class="isList?'icon-shitu01':'icon-shitu02'"></text>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="screen-info">
		<!-- 	<view class="tab-one">
				<u-tabs :list="list1"
				 lineWidth="20"
				 lineColor="#f56c6c"
				 :activeStyle="{
					 color: '#303133',
					 fontWeight: 'bold',
					 transform: 'scale(1.05)'
				 }"
				 :inactiveStyle="{
					 color: '#606266',
					 transform: 'scale(1)'
				 }"
				  itemStyle="width:50%;height: 40px;"
				@click="clickTab"></u-tabs>
			</view> -->
			<view class="screen-list">
				<view class="list" @click="compreClick" :class="{'action':screenShow===0}">
					<text>综合</text>
					<!-- <text class="iconfont icon-sanjiao icon_z"></text> -->
				</view>
				<view class="list" @click="salesClick" :class="{'action':screenShow===1}">
					<text>销量</text>
					<view class="icon_j">
						<text class="iconfont icon-sanjiao up"></text>
						<text class="iconfont icon-sanjiao down"></text>
					</view>
				</view>
				<view class="list" @click="priceClick" :class="{'action':screenShow===2}">
					<text>价格</text>
					<view class="icon_j">
						<text class="iconfont icon-sanjiao up"></text>
						<text class="iconfont icon-sanjiao down"></text>
					</view>
				</view>
				<view class="list" @click="isDrawer = true">
					<text>筛选</text>
					<text class="iconfont icon-shaixuan icon_s"></text>
				</view>
			</view>
			<!--  111-->
			<view class="tab-two">
				<view class="serve-list">
					<view class="list"  @click="onSynthesize(0)">
						<text class="one-omit">{{checkCate==null?'品牌':checkText}}</text> <u-icon name="arrow-down" color="#d70000" size="16"></u-icon>
					</view>
					<view class="list"  @click="onSynthesize2(0)">
						<text class="one-omit">{{checkCate2==null?'贸易方式':checkText2}}</text><u-icon name="arrow-down" color="#d70000" size="16"></u-icon>
					</view>
					<!-- <view class="list">
						<text>猜你喜欢</text>
					</view> -->
				</view>
			</view>
			<!-- 筛选弹窗 品牌 -->
			<view class="screen-popup" @click.stop="isScreen = false" v-show="isScreen">
				<view class="synthesize">
					<view class="list" v-for="(g,ids) in categoryList" @click="cateGoryClick(ids,g.name,g.id)">
						<block v-if="checkCate == ids">
							<text class="check"></text>
							<text class="title">{{g.name}}</text>
						</block>
						<block v-else>
							<text class="title ">{{g.name}}</text>
						</block>
					</view>
				</view>
			<!-- 	<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>取消</text>
					</view>
					<view class="btn action">
						<text>确认</text>
					</view>
				</view> -->
			</view>
			<!-- 筛选弹窗 贸易方式 -->
			<view class="screen-popup" @click.stop="isTrade = false" v-show="isTrade">
				<view class="synthesize" style="height:200rpx;overflow: hidden;">
					<view class="list" v-for="(g,ids) in tradeList" @click="cateGoryClick2(ids,g.name,g.id)">
						<block v-if="checkCate == ids">
							<text class="check"></text>
							<text class="title">{{g.name}}</text>
						</block>
						<block v-else>
							<text class="title">{{g.name}}</text>
						</block>
					</view>
				</view>
			<!-- 	<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>取消</text>
					</view>
					<view class="btn action">
						<text>确认</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:down="downOption"
				:up="upOption"
				:top="0">
				<view class="goods-list">
					<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList" @click="onGoodsList(item.id,tab)" :key="index">
						<image mode="aspectFill" class="pictrue" :src="item.thumb"></image>
						
						<view class="msg-box">
							<view class="tag">
								{{item.name}}
							</view>
							<view class="price-info flex-box">
								<view class="info-text" v-if="item.price0_text">
									{{item.price0_text || ''}}
								</view>
								<view class="user-price">
									<text class="min">￥</text>
									<text class="max">{{item.price0 || 0}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		
		<!-- 抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false" style="position: absolute;">
			<view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
				<view class="serve">
					<!-- <view class="title">
						<text>服务</text>
					</view>
					<view class="serve-list">
						<view class="list action">
							<text>会员专享</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
					</view> -->
				</view>
				<view class="price-screen">
					<view class="title">
						<text>价格区间</text>
					</view>
					<view class="price-section">
						<input type="number" v-model="price_min" placeholder="最低价">
						<text></text>
						<input type="number" v-model="price_max" placeholder="最高价">
					</view>
				</view>
				<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>取消</text>
					</view>
					<view class="btn action" @click.stop="screenClick">
						<text>确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				isTrade:false,
				tradeList:[
					{id:2202,name:'一般贸易'},
					{id:1101,name:'保税'},
					{id:1303,name:'直邮'},
				],
				checkCate:null,
				checkText:'',
				checkCate2:null,
				checkText2:'',
				comm_img_url:'',
				show:true,
				list1:[
				{
                    name: '商品',
                }, {
                    name: '品牌',
                }],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
				},
				// 列表视图切换
				isList: true,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow: 0,
				// 抽屉
				isDrawer: false,
				id:0,
				goodsList:[
				  // {
				  //   id: 1,
				  //   name: '【限定款·雕花口红8支礼盒装】中国风口红套装七夕礼物送女朋友老婆生日礼物唇膏唇釉花仙西子同心锁口红 【限定款8支雕花口红】',
				  //   price: '188.00',
				  //   vip_price: '99.00',
				  //   img: '/static/img/goods_thumb_20.png',
				  //   is_goods: 0,
				  // },
				],
				pageSize:10,
				categoryList:[],
				trade_type:'',//贸易方式
				brand_id:'',//品牌id
				price_min:'',//最低价
				price_max:'',//最高价
				keyword:'',//搜索
				sort:'price',//'price'价格,'sales'销量
				sort_type:'asc',//'asc'正序,'desc'倒序
        swLevel:0
			}
		},
		onLoad(params) {
			this.keyword = decodeURIComponent(params.keyword||'');
			this.comm_img_url = this.$c.appImg
			if(params.id){
				this.id = params.id
			}
			if(params.brand_id){
				this.brand_id = params.brand_id
			}
			
			this.getBrands()
      this.getShopInfo()
		},
		methods: {
			// 搜索
			searchList(e){
				this.keyword = e.detail .value
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
      getShopInfo(){
        //加载等级信息
        this.$u.api.shopInfo().then(res => {
          if (res.status) {
            this.shopInfo = res.msg
            this.show = res.msg.show
            this.swLevel = res.msg.sw_level;
          }
          console.log(this.swLevel)
        })
            .catch(err => {
              console.log(err);
            })
      },
			screenClick(){
				this.isDrawer = false
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			// 销量
			salesClick(){
				this.screenShow = 1
				this.sort = 'sales'
				if(this.sort_type=='asc'){
					this.sort_type = 'desc'
				}else{
					this.sort_type = 'asc'
				}
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			// 价格
			priceClick(){
				this.screenShow = 2
				this.sort = 'price'
				if(this.sort_type=='asc'){
					this.sort_type = 'desc'
				}else{
					this.sort_type = 'asc'
				}
			    this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			// 综合
			compreClick(){
				this.checkCate = null
				this.checkCate2 = null
				this.screenShow = 0;
				this.brand_id = ''
				this.trade_type = ''
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			// 品牌选择
			cateGoryClick(ids,text,id){
				this.checkCate = ids
				this.checkText = text
				this.brand_id = id
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			//贸易方式
			cateGoryClick2(ids,text,id){
				this.checkCate2 = ids
				this.checkText2 = text
				this.trade_type = id
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			/*上拉加载的回调*/
			  upCallback(page) {
				  console.log(page,'111')
			    //联网加载数据
				  let _this = this
			    this.$u.api.goodsGoods({
					page:page.num,
					cate_id:this.id,
					trade_type:this.trade_type,
					brand_id:this.brand_id,
					price_min:this.price_min,
					price_max:this.price_max,
					keyword:this.keyword,
					sort:this.sort,
					sort_type:this.sort_type,
					}).then(res=>{
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(_this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
					if(page.num == 1){_this.goodsList = []}else{} //如果是第一页需手动制空列表
					this.goodsList=this.goodsList.concat(res.msg.list); //追加新数据
			
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
			    })
			  },
			clickTab(item) {
				console.log('item', item);
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.mescroll.endSuccess();
			},
			
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			getBrands(){
				this.$u.api.goodsBrands({cate_id:this.id}).then(res => {
						if (res.status) {
							this.categoryList = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			onSynthesize(type){
				this.isTrade = false;
				this.screenShow = type;
				this.isScreen = !this.isScreen;
			},
			onSynthesize2(type){
				this.isScreen = false;
				this.screenShow = type;
				this.isTrade = !this.isTrade;
			},
			/**
			 * 商品列表点击
			 */
			onGoodsList(id,tab){
				uni.navigateTo({
					url: '/pages/GoodsDetails/lrGoodsDetails?id='+id
				})
				return false
				
				// uni.navigateTo({
				// 	url: '/pages/GoodsDetails/GoodsDetails',
				// 	animationType: 'zoom-fade-out',
				// 	animationDuration: 200
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	@import  'SearchGoodsList.scss';

	.operation-btn {
		// position: absolute;
		// left: 0;
		// bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 4%;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 46%;
			height: 70rpx;
			background-color: #cccccc;
			// border: 2rpx solid #f6f6f6;
			border-radius: 70rpx;
			// margin-left: 5%;
			text {
				color: #fff;
				font-size: 26rpx;
			}
		}
		.action {
			background-color: #ae87d8;
			text {
				color: #ffffff;
			}
		}
	}
	.tab-two{
		padding:0 30rpx;
		.serve-list {
			display: flex;
			flex-wrap: wrap;
			padding: 0rpx 0;
			.list {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30%;
				height: 50rpx;
				border-radius: 50rpx;
				margin-right: 4%;
				background-color: #efefef;
				text {
					color: #555555;
					font-size: 24rpx;
				}
			}
			.list:nth-child(3n) {
				margin-right: 0;
			}
			.action {
				background-color: #ae87d8;
				border: 2rpx solid #ae87d8;
				text {
					color: #fff;
				}
			}
		}
	}
</style>
